﻿<template>
  <div class="detail">
     <div v-if="data">
        <div id="column" v-for="{aid,atitle,descriptions,img,riqi,statu} in data" :key="aid">
            <img :src="img" alt="">
            <div id="row">
                <div id="date">
                    <span>{{riqi}}</span>
                    <p>{{statu}}</p>
                </div>
                <div id="text">
                    <h5>{{atitle}}</h5>
                    <p style="font-size:8px">{{descriptions}}</p>
                </div>
            </div>
        </div>
     </div>
  </div>  
</template>

<script>
    export default {
    data() {
      return {
        data: null,
      }
    },

    
    
    mounted(){
      this.getData()

    },


    methods: {
      getData() {
        var url =  `http://127.0.0.1:3000/aier/activity/aier_activity`
        console.log(url);
        this.axios.get(url).then(res=>{
          console.log(res);
          this.data= res.data
        })
      },



    },
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}

.detail{
    width: 100%;
    text-align: center;
    
    #column{
        margin: 20px 0;
    }

    img{
        width: 90%;
    }

    #row{
        margin: 0 auto;
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-direction: row;
        

        #date{
            span{
                width: 50%;
            }
            p{
                text-align: center;
                width: 60%;
                background-color: #5dd95d;
                padding: 10px 0px;

            }
        }

        #text{
            
            width: 80%;

            h5{
                word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            }

            p{
                word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            }
        }
    }
}
</style>